@scrollbar-size: 6px;
@head-size: 40px;
@item-size: 32px;
@radius: 6px;

.micro-navigation {
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: @head-size;
  box-sizing: border-box;

  .micro-navigation-head {
    position: absolute;
    top: 0;
    height: @head-size;
    left: 0;
    right: 0;
    overflow-y: hidden;
    z-index: 1;

    .micro-navigation-head-item-list {
      white-space: nowrap;
      display: inline-block;
    }

    .micro-navigation-head-item {
      display: inline-block;
      font-size: 14px;
      white-space: nowrap;
      height: @item-size;
      line-height: @item-size;
      vertical-align: top;
      padding: 0 16px;
      position: relative;
      cursor: pointer;
      user-select: none;

      & > .pl-icon {
        margin-right: 4px;
      }

      .navigation-head-close-button {
        position: absolute;
        top: 3px;
        right: -2px;
        z-index: 2;
        opacity: 0;
        transition: opacity linear 150ms;
      }

      &:hover {
        .navigation-head-close-button {
          opacity: 1;
        }
      }

      & > span {
        font-size: 12px;
      }

      &.micro-navigation-head-item-active {
        background-color: white;
        border-bottom-left-radius: @radius;
        border-bottom-right-radius: @radius;
        box-shadow: 0 -10px 61px rgba(0, 21, 41, 0.1);

        &:after {
          position: absolute;
          top: 0;
          height: 3px;
          left: 0;
          right: 0;
          content: '';
          background-color: white;
        }
      }

      &:not(.pl-text-primary) {
        color: rgba(black, 0.45);
      }

      &.micro-navigation-head-item-prev {
        &:before {
          position: absolute;
          width: @radius;
          height: (@item-size/2px);
          content: '';
          right: 0;
          background-color: white;
        }

        &:after {
          position: absolute;
          width: @radius;
          height: (@item-size/2px);
          content: '';
          right: 0;
          background-color: @background;
          z-index: 1;
          border-top-right-radius: @radius;
        }
      }

      &.micro-navigation-head-item-next {
        &:before {
          position: absolute;
          width: @radius;
          height: (@item-size/2px);
          content: '';
          left: 0;
          background-color: white;
        }

        &:after {
          position: absolute;
          width: @radius;
          height: (@item-size/2px);
          content: '';
          left: 0;
          background-color: @background;
          z-index: 1;
          border-top-left-radius: @radius;
        }
      }
    }
  }

  .micro-navigation-body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.micro-navigator-page {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    background: white;
    width: @scrollbar-size;
    height: @scrollbar-size;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(black, 0.2);
    border-radius: 6px;
  }

}
